<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农业全流程数据大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #111827;
            color: #e5e7eb;
        }
        .chart-container {
            background-color: #1f2937;
            border-radius: 0.75rem;
            padding: 1rem;
            border: 1px solid #374151;
            transition: all 0.3s ease;
        }
        .chart-container:hover {
            border-color: #00ffff;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
        }
        .data-card {
            background-color: #1f2937;
            border-left: 4px solid;
            transition: all 0.3s ease;
        }
        .data-card:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
        }
        .glow-text {
            text-shadow: 0 0 5px currentColor;
        }
    </style>
</head>
<body class="bg-gray-900">
    <div class="container mx-auto px-4 py-8">
        <!-- 头部标题 -->
        <header class="mb-8 text-center relative">
            <div class="absolute inset-0 bg-blue-500 rounded-xl opacity-20 filter blur-3xl -z-10"></div>
            <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600 glow-text">智慧农业全流程监控大屏</h1>
            <p class="text-xl text-gray-400 mt-2">农田种植全生命周期数据可视化分析</p>
        </header>

        <!-- 数据概览卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
            <div class="data-card rounded-xl shadow-lg p-4 text-center border-l-4 border-cyan-400">
                <div class="text-3xl font-bold text-cyan-400 glow-text" id="plantingArea">0</div>
                <div class="text-gray-400 mt-2">种植面积(亩)</div>
            </div>
            <div class="data-card rounded-xl shadow-lg p-4 text-center border-l-4 border-blue-400">
                <div class="text-3xl font-bold text-blue-400 glow-text" id="irrigationArea">0</div>
                <div class="text-gray-400 mt-2">灌溉面积(亩)</div>
            </div>
            <div class="data-card rounded-xl shadow-lg p-4 text-center border-l-4 border-green-400">
                <div class="text-3xl font-bold text-green-400 glow-text" id="weedingEfficiency">0</div>
                <div class="text-gray-400 mt-2">除草效率(%)</div>
            </div>
            <div class="data-card rounded-xl shadow-lg p-4 text-center border-l-4 border-purple-400">
                <div class="text-3xl font-bold text-purple-400 glow-text" id="pestControl">0</div>
                <div class="text-gray-400 mt-2">病虫害防治率(%)</div>
            </div>
            <div class="data-card rounded-xl shadow-lg p-4 text-center border-l-4 border-pink-400">
                <div class="text-3xl font-bold text-pink-400 glow-text" id="harvestYield">0</div>
                <div class="text-gray-400 mt-2">收获产量(吨)</div>
            </div>
        </div>

        <!-- 主图表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- 种植阶段图表 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4 text-cyan-400 glow-text">种植阶段数据分析</h2>
                <div id="plantingChart" class="h-80"></div>
            </div>

            <!-- 浇灌阶段图表 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4 text-blue-400 glow-text">浇灌阶段数据分析</h2>
                <div id="irrigationChart" class="h-80"></div>
            </div>

            <!-- 除草阶段图表 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4 text-green-400 glow-text">除草阶段数据分析</h2>
                <div id="weedingChart" class="h-80"></div>
            </div>

            <!-- 病虫害防治图表 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4 text-purple-400 glow-text">病虫害防治分析</h2>
                <div id="pestChart" class="h-80"></div>
            </div>

            <!-- 收获阶段图表 -->
            <div class="chart-container col-span-1 lg:col-span-2">
                <h2 class="text-xl font-semibold mb-4 text-pink-400 glow-text">收获阶段数据分析</h2>
                <div id="harvestChart" class="h-96"></div>
            </div>
        </div>
    </div>

    <script>
        // 初始化变量
        let plantingChart, irrigationChart, weedingChart, pestChart, harvestChart;

        // 数字动画函数
        function animateValue(id, start, end, duration) {
            const obj = document.getElementById(id);
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = Math.floor(progress * (end - start) + start);
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        // 初始化种植图表
        function initPlantingChart() {
            const chartDom = document.getElementById('plantingChart');
            plantingChart = echarts.init(chartDom);

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' },
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: '#00ffff',
                    borderWidth: 1,
                    textStyle: { color: '#fff' }
                },
                legend: {
                    data: ['小麦', '玉米', '水稻', '大豆'],
                    textStyle: { color: '#ddd' },
                    right: 10,
                    top: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['3月', '4月', '5月', '6月', '7月', '8月'],
                    axisLine: { lineStyle: { color: '#4a4a4a' } },
                    axisLabel: {
                        color: '#ddd',
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '面积(亩)',
                    nameTextStyle: { color: '#ddd' },
                    splitLine: { lineStyle: { color: 'rgba(100,100,100,0.3)' } },
                    axisLine: { show: false },
                    axisLabel: { color: '#ddd' }
                },
                series: [
                    {
                        name: '小麦',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series',
                            itemStyle: {
                                color: '#00ffff',
                                shadowBlur: 10,
                                shadowColor: '#00ffff'
                            }
                        },
                        data: [320, 332, 301, 334, 390, 120],
                        itemStyle: {
                            color: '#00ffff',
                            borderRadius: [4, 4, 0, 0]
                        }
                    },
                    {
                        name: '玉米',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series',
                            itemStyle: {
                                color: '#0088ff',
                                shadowBlur: 10,
                                shadowColor: '#0088ff'
                            }
                        },
                        data: [120, 132, 101, 134, 90, 230],
                        itemStyle: {
                            color: '#0088ff',
                            borderRadius: [4, 4, 0, 0]
                        }
                    },
                    {
                        name: '水稻',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series',
                            itemStyle: {
                                color: '#00ff88',
                                shadowBlur: 10,
                                shadowColor: '#00ff88'
                            }
                        },
                        data: [220, 182, 191, 234, 290, 330],
                        itemStyle: {
                            color: '#00ff88',
                            borderRadius: [4, 4, 0, 0]
                        }
                    },
                    {
                        name: '大豆',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series',
                            itemStyle: {
                                color: '#ff00ff',
                                shadowBlur: 10,
                                shadowColor: '#ff00ff'
                            }
                        },
                        data: [150, 232, 201, 154, 190, 330],
                        itemStyle: {
                            color: '#ff00ff',
                            borderRadius: [4, 4, 0, 0]
                        }
                    }
                ]
            };

            plantingChart.setOption(option);
        }

        // 初始化浇灌图表
        function initIrrigationChart() {
            const chartDom = document.getElementById('irrigationChart');
            irrigationChart = echarts.init(chartDom);

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' },
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: '#0088ff',
                    borderWidth: 1,
                    textStyle: { color: '#fff' }
                },
                legend: {
                    data: ['滴灌', '喷灌', '漫灌', '作物需水量'],
                    textStyle: { color: '#ddd' },
                    right: 10,
                    top: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: { lineStyle: { color: '#4a4a4a' } },
                    axisLabel: { color: '#ddd' }
                },
                yAxis: {
                    type: 'value',
                    name: '水量(m³)',
                    nameTextStyle: { color: '#ddd' },
                    splitLine: { lineStyle: { color: 'rgba(100,100,100,0.3)' } },
                    axisLine: { show: false },
                    axisLabel: { color: '#ddd' }
                },
                series: [
                    {
                        name: '滴灌',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(0, 136, 255, 0.3)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, color: '#0088ff' },
                        showSymbol: false,
                        data: [120, 132, 101, 134, 90, 230, 210, 180, 150, 120, 110, 100]
                    },
                    {
                        name: '喷灌',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(0, 200, 255, 0.3)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, color: '#00c8ff' },
                        showSymbol: false,
                        data: [220, 182, 191, 234, 290, 330, 310, 280, 250, 220, 210, 200]
                    },
                    {
                        name: '漫灌',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(0, 100, 255, 0.3)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, color: '#0064ff' },
                        showSymbol: false,
                        data: [150, 232, 201, 154, 190, 330, 410, 380, 350, 320, 310, 300]
                    },
                    {
                        name: '作物需水量',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(100, 200, 255, 0.1)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, type: 'dashed', color: '#64c8ff' },
                        showSymbol: false,
                        data: [320, 332, 301, 334, 390, 430, 410, 380, 350, 320, 310, 300]
                    }
                ]
            };

            irrigationChart.setOption(option);
        }

        // 初始化除草图表
        function initWeedingChart() {
            const chartDom = document.getElementById('weedingChart');
            weedingChart = echarts.init(chartDom);

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: '#00ff88',
                    borderWidth: 1,
                    textStyle: { color: '#fff' }
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: { color: '#ddd' }
                },
                series: [
                    {
                        name: '除草方式',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#1f2937',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center',
                            color: '#ddd'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold',
                                color: '#00ff88'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 255, 136, 0.5)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 35, name: '机械除草', itemStyle: { color: '#00ff88' } },
                            { value: 30, name: '化学除草', itemStyle: { color: '#00cc66' } },
                            { value: 20, name: '人工除草', itemStyle: { color: '#009944' } },
                            { value: 15, name: '生物除草', itemStyle: { color: '#006633' } }
                        ]
                    }
                ]
            };

            weedingChart.setOption(option);
        }

        // 初始化病虫害图表
        function initPestChart() {
            const chartDom = document.getElementById('pestChart');
            pestChart = echarts.init(chartDom);

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: '#aa00ff',
                    borderWidth: 1,
                    textStyle: { color: '#fff' }
                },
                legend: {
                    data: ['防治效果', '发生频率'],
                    textStyle: { color: '#ddd' },
                    right: 10,
                    top: 0
                },
                radar: {
                    indicator: [
                        { name: '蚜虫', max: 100 },
                        { name: '红蜘蛛', max: 100 },
                        { name: '稻飞虱', max: 100 },
                        { name: '纹枯病', max: 100 },
                        { name: '白粉病', max: 100 },
                        { name: '锈病', max: 100 }
                    ],
                    radius: '65%',
                    axisName: {
                        color: '#ddd'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(100, 100, 100, 0.3)'
                        }
                    },
                    splitArea: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(100, 100, 100, 0.3)'
                        }
                    }
                },
                series: [
                    {
                        name: '防治效果 vs 发生频率',
                        type: 'radar',
                        data: [
                            {
                                value: [85, 90, 78, 82, 75, 80],
                                name: '防治效果',
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 3,
                                    color: '#aa00ff'
                                },
                                areaStyle: {
                                    color: 'rgba(170, 0, 255, 0.2)'
                                },
                                itemStyle: {
                                    color: '#aa00ff'
                                }
                            },
                            {
                                value: [45, 30, 55, 40, 60, 35],
                                name: '发生频率',
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 3,
                                    color: '#ff00aa'
                                },
                                areaStyle: {
                                    color: 'rgba(255, 0, 170, 0.2)'
                                },
                                itemStyle: {
                                    color: '#ff00aa'
                                }
                            }
                        ]
                    }
                ]
            };

            pestChart.setOption(option);
        }

        // 初始化收获图表
        function initHarvestChart() {
            const chartDom = document.getElementById('harvestChart');
            harvestChart = echarts.init(chartDom);

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' },
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: '#ff00aa',
                    borderWidth: 1,
                    textStyle: { color: '#fff' }
                },
                legend: {
                    data: ['小麦', '玉米', '水稻', '大豆'],
                    textStyle: { color: '#ddd' },
                    right: 10,
                    top: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
                    axisLine: { lineStyle: { color: '#4a4a4a' } },
                    axisLabel: { color: '#ddd' }
                },
                yAxis: {
                    type: 'value',
                    name: '产量(吨)',
                    nameTextStyle: { color: '#ddd' },
                    splitLine: { lineStyle: { color: 'rgba(100,100,100,0.3)' } },
                    axisLine: { show: false },
                    axisLabel: { color: '#ddd' }
                },
                series: [
                    {
                        name: '小麦',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(255, 0, 170, 0.3)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, color: '#ff00aa' },
                        showSymbol: false,
                        data: [120, 132, 101, 134, 190, 230, 210]
                    },
                    {
                        name: '玉米',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(255, 100, 0, 0.3)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, color: '#ff6400' },
                        showSymbol: false,
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '水稻',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(255, 200, 0, 0.3)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, color: '#ffc800' },
                        showSymbol: false,
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '大豆',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { color: 'rgba(200, 0, 255, 0.3)' },
                        emphasis: { focus: 'series' },
                        lineStyle: { width: 3, color: '#c800ff' },
                        showSymbol: false,
                        data: [320, 332, 301, 334, 390, 430, 410]
                    }
                ]
            };

            harvestChart.setOption(option);
        }

        // 窗口大小变化时重新调整图表大小
        window.addEventListener('resize', function() {
            plantingChart && plantingChart.resize();
            irrigationChart && irrigationChart.resize();
            weedingChart && weedingChart.resize();
            pestChart && pestChart.resize();
            harvestChart && harvestChart.resize();
        });

        // 页面加载完成后初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 启动数字动画
            animateValue('plantingArea', 0, 1250, 1500);
            animateValue('irrigationArea', 0, 980, 1500);
            animateValue('weedingEfficiency', 0, 92, 1500);
            animateValue('pestControl', 0, 88, 1500);
            animateValue('harvestYield', 0, 1560, 1500);

            // 初始化所有图表
            initPlantingChart();
            initIrrigationChart();
            initWeedingChart();
            initPestChart();
            initHarvestChart();
        });
    </script>
</body>
</html>
